<template>
    <view class="bg-[#f8f8f8] min-h-[100vh] box-border" :style="themeColor()">
        <template v-if="Object.keys(detail).length">
             <!-- #ifdef H5 -->
             <view class="w-[100%] h-[375rpx] relative  background-size box-border p-[24rpx]" :style="{ backgroundImage: 'url(' + img('addon/shop_fenxiao/task_detail_wechat.png') + ')',height:headerHeight }">
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <view class="w-[100%] h-[550rpx] relative  background-size box-border p-[24rpx]" :style="{ backgroundImage: 'url(' + img('addon/shop_fenxiao/task_detail_wechat.png') + ')',height:headerHeight }">
                <top-tabbar :data="param" :scrollBool="topTabarObj.getScrollBool()" class="top-header"/>
            <!-- #endif -->
                <!-- 跳转个任务奖励明细 -->
                <view class="absolute bottom-[304rpx] right-[0rpx] bg-[rgba(202,111,0,0.3)] pl-[16rpx] pr-[14rpx] py-[4rpx] leading-[34rpx] rounded-tl-[20rpx] rounded-bl-[20rpx]" @click="toDetail">
                    <text class="iconfont iconlishijiluV6xx text-[24rpx] text-[#fff] mr-[6rpx]"></text>
                    <text class="text-[24rpx] text-[#fff] ">奖励明细</text>
                </view>
             </view>
             <view class="px-[var(--sidebar-m)] pb-[20rpx] mt-[-75rpx]">
                <!-- 活动未开始 -->
                <view class="bg-[#fff] rounded-[16rpx] py-[48rpx] text-center relative mb-[20rpx]" v-if="detail.status === 1">
                    <view class="text-[#626779] text-[32rpx] font-500 leading-[46rpx] mb-[10rpx]">该任务还未开始</view>
                    <view class="text-[#8288A2] text-[26rpx] leading-[36rpx]">请您耐心等待...</view>
                </view>
                <view class="bg-[#fff] rounded-[16rpx]  px-[30rpx] pt-[40rpx] pb-[30rpx] relative" v-if="detail.status !== 1">
                    <view class="text-[32rpx] font-bold text-[#333] leading-[45rpx] multi-hidden text-center mb-[77rpx]">{{ detail.name }}</view>
                    <!-- 进度条 -->
                    <view class="relative pb-[58rpx] mb-[30rpx] mr-[30rpx]">
                        <view class="w-full h-[24rpx] rounded-[12rpx] bg-[#FFF2D0] flex">
                            <!-- 进度条 -->
                            <view class="h-[24rpx] rounded-[12rpx] bg-linear flex overflow-hidden" :style="{ 'width': detail.task_member ? detail.task_member.task_data.show_progress.rate + '%' : 0 }">
                                <view class="mr-[10rpx] h-[24rpx] flex-1 flex items-center justify-end box-border">
                                    <text class="w-[4rpx] h-[4rpx] rounded-full bg-[#fff] mr-[6rpx]"></text>
                                    <text class="w-[6rpx] h-[6rpx] rounded-full bg-[#fff] mr-[6rpx]"></text>
                                    <text class="w-[8rpx] h-[8rpx] rounded-full bg-[#fff]"></text>
                                </view>
                            </view>
                            <!-- 总进度图标 -->
                            <image class="w-[52rpx] h-[52rpx] align-middle absolute right-0 top-[12rpx] transform -translate-y-1/2" mode="widthFix" :src="img('addon/shop_fenxiao/task_icon.png')"></image>
                            <!-- 总进度金额 -->
                             <view class="money px-[8rpx]  bg-[var(--primary-color)] text-[#fff] absolute right-[26rpx] top-[-56rpx] transform translate-x-1/2 rounded-[16rpx] z-10 flex items-center">
                                <text class="text-[16rpx] leading-[22rpx]">￥</text>
                                <text class="text-[24rpx] leading-[34rpx]">{{ detail.rules[0].reward?.commission }}</text>
                             </view>
                        </view>
                        <!-- 当前完成进度文字 -->
                        <view ref="mytext" v-if="detail.task_member && detail.task_member.task_data.show_progress.rate != 100"
                            class="absolute text-[26rpx] bottom-0 transform -translate-x-1/2 leading-[34rpx] text-[var(--primary-color)]"
                            :style="{ 'left': detail.task_member ? detail.task_member.task_data.show_progress.rate + '%' : 0 }">{{ detail.task_member.task_data.now_data + detail.task_member.task_data.util }}</view>
                        <!-- 需完成的总进度完成 -->
                        <view ref="overallText" class="absolute text-[26rpx] bottom-0 right-0">{{ detail.task_member ? (detail.task_member.task_data.util=='元'?moneyFormat(detail.task_member.task_data.end_data):detail.task_member.task_data.end_data) + detail.task_member.task_data.util : (detail.task_data.util=='元'?moneyFormat(detail.task_data.end_data):detail.task_data.end_data) + detail.task_data.util }}</view>
                    </view>
                    <view class="bg-[#FFF8EF] rounded-[16rpx] px-[30rpx] py-[20rpx]" v-if="detail.task_member">
                        <view class="text-center text-[28rpx] leading-[40rpx] font-500 mb-[30rpx]">完成进度</view>
                        <view class="flex items-center mb-[20rpx]">
                            <view class="text-[26rpx] flex-1 w-[615rpx] break-all flex items-center" >
                                <text class="text-[#823D19]">{{detail.task_member.task_data.util=='元' ? '完成金额：' :detail.task_member.task_data.util=='单' ? '完成单数：' : '推广人数'}}</text>
                                <view  class="text-[26rpx] text-[#333]">
                                    {{detail.task_member.task_data.title}}已达<text class="text-[var(--primary-color)]">{{detail.task_member.task_data.util=='元'?moneyFormat(detail.task_member.task_data.now_data):detail.task_member.task_data.now_data }}</text>{{detail.task_member.task_data.util}}
                                </view>
                            </view>
                        </view>
                        <view class="flex items-center mb-[20rpx]">
                            <view class="text-[26rpx] flex-1 w-[615rpx] break-all flex items-center">
                                <text class="text-[#823D19]">完成次数：</text>
                                <view class="text-[26rpx] text-[#333]">
                                    <text class="text-[var(--primary-color)]">{{ detail.task_member.complete_num }}</text>
                                    <text>/{{ detail.times?detail.times+'次':'不限次' }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="flex items-center">
                            <view class="text-[26rpx] flex-1 w-[615rpx] break-all flex items-center">
                                <text class="text-[#823D19]">领取奖励：</text>
                                <text class="text-[#333]">累计领取{{ detail.task_member.complete_num }}次奖励共计{{ moneyFormat(detail.task_member.complete_num * detail.rules[0].reward?.commission)}}元</text>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 任务信息 -->
                <view class="bg-[#fff] rounded-[16rpx] overflow-hidden mt-[20rpx] px-[30rpx] py-[20rpx]">
                    <view class="text-[32rpx] font-bold  mb-[30rpx] leading-[45rpx]">任务信息</view>
                    <view class="flex items-center mb-[20rpx]">
                        <view class="text-[26rpx] flex-1 w-[615rpx] break-all flex items-center">
                            <text class="text-[#626779]">任务内容：</text>
                            <view v-if="!detail.task_member" class="text-[26rpx] text-[#333]">
                                {{detail.task_data.title}}达{{detail.rules[0].condition?.type.includes('order_num') ? detail.rules[0].condition?.order_num : detail.rules[0].condition?.type.includes('order_money') ? detail.rules[0].condition?.order_money : detail.rules[0].condition?.child_num }}{{detail.task_data.util}}
                            </view>
                            <view v-else class="text-[26rpx] text-[#333]">
                                {{detail.task_member.task_data.title}}达{{detail.rules[0].condition?.type.includes('order_num') ? detail.rules[0].condition?.order_num : detail.rules[0].condition?.type.includes('order_money') ? detail.rules[0].condition?.order_money : detail.rules[0].condition?.child_num }}{{detail.task_member.task_data.util}}
                            </view>
                        </view>
                    </view>
                    <view class="flex items-center mb-[20rpx]">
                        <view class="text-[26rpx] flex-1 w-[615rpx] break-all">
                            <text class="text-[#626779]">任务奖励：</text>
                            <text class="text-[#333]">{{ moneyFormat(detail.rules[0].reward?.commission)}}元</text>
                        </view>
                    </view>
                    <view class="flex items-center mb-[20rpx]">
                        <view class="text-[26rpx] flex-1 w-[615rpx] break-all" v-if="detail.type===1">
                            <text class="text-[#626779]">参与次数：</text>
                            <text class="text-[#333]">{{ detail.times?detail.times+'次':'不限次' }}</text>
                        </view>
                    </view>
                    <view class="flex items-center mb-[20rpx]">
                        <view class="text-[26rpx] flex-1 w-[615rpx] break-all flex items-center">
                            <text class="text-[#626779]">活动时间：</text>
                            <view class="text-[#333]">
                                {{ detail.start_time ? detail.start_time.substring(0, 10) : '--' }} 至 {{ detail.time_type == 1 ? detail.end_time.substring(0, 10) : "长期有效" }}（{{ detail.status === 1?'未开始':detail.status === 2?'已开始':'已结束' }}）
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 奖励规则 -->
                <view class="bg-[#fff] rounded-[16rpx] overflow-hidden mt-[20rpx] p-[30rpx]">
                    <view class="text-[32rpx] font-bold  mb-[30rpx] leading-[45rpx]">{{t('rewardRules')}}</view>
                    <view class="flex mb-[20rpx]">
                        <view class="text-[26rpx] flex-1 w-[615rpx] break-all">
                            <text class="text-[#626779]">参与等级：</text>
                            <text class="text-[#333]">
                                {{ detail.level_type == 1 && '全部等级' || detail.level_type == 2 && Object.values(detail.level_data).toString() }}
                            </text>
                        </view>
                    </view>
                    <view class="flex items-center mb-[20rpx]">
                        <view class="text-[26rpx] flex-1  w-[615rpx] break-all">
                            <text class="text-[#626779]">奖励指标：</text>
                            <text class="text-[#333]">{{ detail.task_member ? detail.task_member.task_data.title : detail.task_data.title }}</text>
                        </view>
                    </view>
                    <view class="flex items-center">
                        <view v-if="!detail.task_member" class="text-[26rpx] flex-1 w-[615rpx] break-all">
                            <text class="text-[#626779]">奖励说明：</text>
                            <text class="text-[#333]">
                                {{detail.task_data.title}}达{{detail.rules[0].condition?.type.includes('order_num') ? detail.rules[0].condition?.order_num : detail.rules[0].condition?.type.includes('order_money') ? detail.rules[0].condition?.order_money : detail.rules[0].condition?.child_num }}{{detail.task_data.util}}即可获得{{moneyFormat(detail.rules[0].reward?.commission)}}元佣金</text>
                        </view>
                        <view v-else class="text-[26rpx] flex-1 w-[615rpx] break-all">
                            <text class="text-[#626779]">奖励说明：</text>
                            <text class="text-[#333]">
                                {{detail.task_member.task_data.title}}达{{detail.rules[0].condition?.type.includes('order_num') ? detail.rules[0].condition?.order_num : detail.rules[0].condition?.type.includes('order_money') ? detail.rules[0].condition?.order_money : detail.rules[0].condition?.child_num }}{{detail.task_member.task_data.util}}即可获得{{moneyFormat(detail.rules[0].reward?.commission)}}元佣金
                            </text>
                        </view>
                    </view>
                </view>
                <!-- 任务说明 -->
                <view v-if="detail.remark" class="bg-[#fff] rounded-[10rpx] overflow-hidden mt-[30rpx] p-[24rpx]">
                    <view class="text-[30rpx] font-600 mt-[24rpx]">{{t('taskSpecification')}}</view>
                    <view class="text-[#999] text-[26rpx] mt-[24rpx]">{{ detail.remark }}</view>
                </view>
             </view>
        </template>
        <u-loading-page bg-color="rgb(248,248,248)" :loading="loading" loadingText="" fontSize="16" color="#333"></u-loading-page>
    </view>
</template>

<script lang="ts" setup>
import { t } from '@/locale';
import { ref } from 'vue'
import { img, redirect,moneyFormat } from '@/utils/common';
import { onLoad } from '@dcloudio/uni-app'
import { getTaskInfo } from '@/addon/shop_fenxiao/api/task'
import { topTabar } from '@/utils/topTabbar'

/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let param = topTabarObj.setTopTabbarParam({title:'任务奖励详情'})
/********* 自定义头部 - end ***********/

//头部高度
const detail: Record<string, any> = ref({})
onLoad((option: any) => {
    getTaskInfoFn(Number(option.id))
})
let loading = ref<boolean>(true);//页面加载动画
const getTaskInfoFn = (id: number) => {
    getTaskInfo(id).then((res: any) => {
        detail.value = res.data
        if (detail.value.status === 1) {
            detail.value.time = new Date(detail.value.start_time).getTime() - new Date().getTime()
            detail.value.time = detail.value.time < 0 ? '' : detail.value.time
        } else if (detail.value.status === 2) {
            if (detail.value.time_type != 2) {
                detail.value.time = new Date(detail.value.end_time).getTime() - new Date().getTime()
                detail.value.time = detail.value.time < 0 ? '' : detail.value.time
            } else {
                detail.value.time = ''
            }
        }
        loading.value = false
    }).catch(() => {
        loading.value = false
    })

}
const timeData: Record<string, any> = ref({})
//计算进度条上方文字极限展示位置
// const Progresslock: Record<string, any> = ref({
//     leftTranslateLock:false
// })
// const mytext = ref<HTMLElement>()//

// const Progress =()=>{
//     if(detail.task_member) {
//         detail.task_member.task_data.show_progress.rate
//     }
// }
const onChange = (e: any) => {
    timeData.value = e
}
const toDetail = ()=>{
    redirect({ url: '/addon/shop_fenxiao/pages/task_rewards_detail', param: {id:detail.value.id} })
}
</script>
<style lang="scss">
.time__hours,
.time__minutes,
.time__seconds {
    color: #fff;
    display: inline-block;
    background: var(--primary-color);
    width: 45rpx;
    height: 45rpx;
    text-align: center;
    line-height: 45rpx;
    border-radius: 3rpx;
}

.background-size {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}
.bg-linear{
    background: linear-gradient( 90deg, #FFB054 0%, #FF2524 100%);
}
.money{
    &::after{
        content: "";
        width:8rpx;
        height: 8rpx;
        background-color: var(--primary-color);
        transform: rotate(45deg)  translateX(-50%);
        position:absolute;
        bottom:-6rpx;
        left:50%;
    }
}
</style>